<template>
  <div class="visitor">
    <div class="headerFilterBox" style="margin-bottom: 10px">
      <el-select style="width: 130px" v-model="filterConfig.timeType" placeholder="时间类型" size="small">
        <el-option
          v-for="item in timeTypeList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <div style="margin: 0 10px">
        <ErpTimePicker
          :timeValue="filterConfig.timeList"
          @handlerTimeChange="handlerTimeChange"
          type="daterange"
        />
      </div>
      <el-input size="small" style="width: 170px" clearable class="searchInput" v-model.trim="filterConfig.searchKey" placeholder="请输入名称">
        <template #suffix>
          <el-icon class="el-input__icon">
            <search @click="searchTable" />
          </el-icon>
        </template>
      </el-input>
      <ErpSearchButton
        @searchTable="searchTable"
      ></ErpSearchButton>
      <el-select style="width: 150px; margin: 0 10px" v-model="filterConfig.accountId" placeholder="门店筛选" size="small" :clearable="true">
        <el-option
          v-for="item in shopList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <el-table :data="tableConfig.data"  size="small"
              height="calc(100vh - 280px)"
              class="tableClass"
              style="width: 100%;"
              border
              v-loading="tableConfig.loading"
              :header-cell-style="{ background: '#f4f4f4', color: '#000' }"
    >
      <el-table-column type="index" label="序号" />
      <el-table-column prop="fromUserNickName" label="昵称"  />
      <el-table-column prop="accountName" label="抖音"  ></el-table-column>
      <el-table-column prop="firstAccessTime" label="首次访问时间">
        <template #default="{row}">
          {{formatDateTime(row.firstAccessTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="lastAppointNickName" label="最后接入客服" />
      <el-table-column prop="lastAccessTime" label="最后互动时间">
        <template #default="{row}">
          {{formatDateTime(row.lastAccessTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="userChatStatus" label="活跃度" width="150px" align="center">
        <template #default="{row}">
          <div class="btnItem" style="background: #e6963e" v-if="row.userChatStatus === 1">已读不回</div>
          <div class="btnItem" v-else-if="row.userChatStatus === 2">互动中</div>
          <div class="btnItem" style="background: #f86062" v-else-if="row.userChatStatus === 3">未读未回</div>
          <div v-else>暂无</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200px">
        <template #default="{row}">
          <el-button link type="primary" size="small" @click="sendMessage(row)">发信息</el-button>
          <el-button link type="primary" size="small" @click="lookMessage(row)">查记录</el-button>
          <el-button link type="primary" size="small">客资</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="erp-order-footer">
      <el-pagination
        size="small"
        :page-sizes="[20, 50, 100, 200, 300]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        background layout="total, sizes, prev, pager, next" :total="tableConfig.total"
        v-model:page-size="tableConfig.pageSize"
        v-model:current-page="tableConfig.pageNum"
      />
    </div>
    <DialogMessage ref="DialogMessageRef"></DialogMessage>
  </div>
</template>

<script setup>
import {reactive, onMounted, ref} from 'vue'
import DialogMessage from "@/components/content-message/dialogMessage/index"
import ErpTimePicker from "@/components/erp-time-picker-v3/erp-time-picker-v3"
import ErpSearchButton from "@/components/erp-search-button/erp-search-button"
import {curEndTime, curStartTime, formatDate} from "@/utils/d_times"
import { get_account_list } from "@/api/dropDown"
import { get_user_list } from "@/api/visitor"

const formatDateTime = (time) => {
  if(!time) return
  return formatDate(time * 1000)
}

const shopList = ref([])
const timeTypeList = ref([
  {name: '首次访问时间', id: 1},
  {name: '创建时间', id: 2},
  {name: '首次开口时间', id: 3},
  {name: '最后互动时间', id: 4},
])
const filterConfig = reactive({
  timeType: 1,
  timeList: [],
  searchKey: "",
  accountId:"",
})
const tableConfig = reactive({
  data: [],
  loading: false,
  pageSize: 20,
  pageNum: 1,
  total: 0,
  headerList:[]
})
onMounted(() => {
  getShopList()
  init()
})

const getShopList = async () => {
  const res = await get_account_list()
  shopList.value = res.data || []
}

const init = () => {
  const startTime = curStartTime()
  const endTime = curEndTime()
  filterConfig.timeList = [startTime, endTime]
  getTableList()
}
const handlerTimeChange = (time) => {
  filterConfig.timeList = time
}
const searchTable = (data) => {
  if(data){
    filterConfig.timeList = data
  }
  tableConfig.pageNum = 1
  getTableList()
}
const getTableList = async () => {
  tableConfig.loading = true
  let params = {
    startTime: filterConfig.timeList[0],
    endTime: filterConfig.timeList[1],
    pageSize: tableConfig.pageSize,
    pageNum: tableConfig.pageNum,
    accountId: filterConfig.accountId,
  }
  const res = await get_user_list(params)
  console.log(res, "res")
  if(res.code === 100000) {
    tableConfig.data = res.data.list || []
    tableConfig.data.forEach(el => {

    })
    tableConfig.total = res.data.total
  }
  tableConfig.loading = false
}
const handleCurrentChange = (num) => {
  tableConfig.pageNum = num
  getTableList()
}
const handleSizeChange = (num) => {
  tableConfig.pageSize = num
  getTableList()
}

const DialogMessageRef = ref()
const sendMessage = (row) => {
  DialogMessageRef.value.openDialog(false, row)
}
const lookMessage = (row) => {
  DialogMessageRef.value.openDialog(true, row)
}
</script>

<style scoped lang="scss">
.btnItem{
  width: 80px;
  color: #fff;
  text-align: center;
  background: #0099e8;
  margin: auto;
}
.erp-order-footer{
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>